﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/sku-table/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">

<style>
    .layui-input-block {
        margin-left: 134px;
        min-height: 36px;
    }

    .layui-form-label {
        float: left;
        display: block;
        width: 80px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        padding: 0;
    }

    .layui-form-checkbox i {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        border: 1px solid #d2d2d2;
        border-left: none;
        border-radius: 0 2px 2px 0;
        color: #fff;
        font-size: 20px;
        text-align: center;
    }

    .layui-form-checked i, .layui-form-checked:hover i {
        color: #5FB878;
    }

    .fairy-sku-table th, .fairy-sku-table td {
        text-align: center;
    }

    .layui-layer-btn0 {
        color: #fff !important;
    }
</style>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" class="layui-form fairy-form">
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">商品名</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" class="form-control" value="{$info.name}" placeholder="请输入商品名">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1, 0.5)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview', 'form-uploaded-box-single')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">轮播图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="imgs_file" multiple style="display: none">
                                    <input type="hidden" class="hidden_value" name="imgs" id="imgs" value="{$info['imgs']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('imgs_file', 'imgs', 'form-uploaded-box', false, 5)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box', 5)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box">
                                        {volist name="info.imgs_arr" id="vo"}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{$vo.path}" data-id="{$vo.id}">
                                            <i class="form-uploaded-imgs-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-imgs-preview', 'form-uploaded-box')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">状态：</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="upper" value="1" title="上架" {$info.upper !=2 ? 'checked' : ''}>
                                    <input type="radio" name="upper" value="2" title="下架" {$info.upper== 2 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">推荐：</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="is_recommend" value="0" title="否" {$info.is_recommend !=1 ? 'checked' : ''}>
                                    <input type="radio" name="is_recommend" value="1" title="是" {$info.is_recommend== 1 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">热门：</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="is_hot" value="0" title="否" {$info.is_hot !=1 ? 'checked' : ''}>
                                    <input type="radio" name="is_hot" value="1" title="是" {$info.is_hot== 1 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">所属分类</label>
                                <div class="col-sm-2">
                                    <select class="form-control one_type" name="one_type_id" lay-filter="one_type">
                                        <option value="0">请选择分类</option>
                                        {volist name="type_list" id="vo"}
                                        <option value="{$vo.id}" {$info.one_type_id== $vo.id ? 'selected' : ''}>{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item bv-box" style="display: none">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">BV（%）</label>
                                <div class="col-sm-3">
                                    <input type="number" name="bv" class="form-control" value="{$id ? $info.bv : $bv}" placeholder="请输入bv">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="benefit-box" style="display: none">

                            <div class="box-item">
                                <div class="form-group row"><label class="col-sm-1 col-form-label">团队网体</label>
                                    <div class="layui-form layui-row col-sm-3">
                                        <select name="team_user_id" lay-search>
                                            <option value="">输入关键词搜索用户</option>
                                            {volist name="user_list" id="vo"}
                                            <option value="{$vo.id}" {$info.team_user_id== $vo.id ? 'selected' : ''}>{$vo.unique_id} / {$vo.mobile} / {$vo.team_count}人</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>

                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">直推（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_direct" class="form-control" value="{$id ? $info.benefit_direct : $benefit_direct}" placeholder="请输入直推奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">V1（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_v1" class="form-control" value="{$id ? $info.benefit_v1 : $benefit_v1}" placeholder="请输入V1奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">V2（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_v2" class="form-control" value="{$id ? $info.benefit_v2 : $benefit_v2}" placeholder="请输入V2奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">V3（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_v3" class="form-control" value="{$id ? $info.benefit_v3 : $benefit_v3}" placeholder="请输入V3奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">V4（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_v4" class="form-control" value="{$id ? $info.benefit_v4 : $benefit_v4}" placeholder="请输入V4奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">V5（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_v5" class="form-control" value="{$id ? $info.benefit_v5 : $benefit_v5}" placeholder="请输入V5奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                                <div class="box-item">
                                    <div class="form-group row"><label class="col-sm-1 col-form-label">V6（元）</label>
                                        <div class="col-sm-3">
                                            <input type="number" name="benefit_v6" class="form-control" value="{$id ? $info.benefit_v6 : $benefit_v6}" placeholder="请输入V6奖励金额">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                </div>
                            </div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">规格：</label>
                                <div class="col-lg-10">
                                    <div id="fairy-spec-table"></div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">属性表：</label>
                                <div class="col-lg-10">
                                    <div id="fairy-sku-table"></div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <!--<div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">每日库存</label>
                                <div class="col-sm-3">
                                    <input type="number" name="stock_count" class="form-control" value="{$info.stock_count}" placeholder="请输入每日库存">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>-->

                        <!--<div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">打包费</label>
                                <div class="col-sm-3">
                                    <input type="number" name="pack_price" class="form-control" value="{$info.pack_price}" placeholder="请输入打包费">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>-->

                        <!--<div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">配送费</label>
                                <div class="col-sm-3">
                                    <input type="number" name="delivery_price" class="form-control" value="{$info.delivery_price}" placeholder="请输入配送费">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>-->

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">商品描述</label>
                                <div class="col-lg-6">
                                    <div class="ibox ">
                                        <textarea id="editor_id">{$info.content}</textarea>
                                        <textarea name="content" data-editor="kindEditor" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="id" value="{:input('id')}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary" lay-submit lay-filter="submit">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}

{include file="public/preview-img-mask" swiper-id="cropper-preview" /}

{/block}

{block name='js'}
<script type="text/javascript" src="/static/sku-table/layui/layui.js"></script>
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>

<script>
    var sku_key = `{$sku_key}`;


    initBox({$type});

    function initBox(type) {
        if (type == 1) {
            $('.bv-box').show();
            $('.benefit-box').hide();
        } else if (type == 2) {
            $('.bv-box').hide();
            $('.benefit-box').show();
        } else {
            $('.bv-box').hide();
            $('.benefit-box').hide();
        }
    }

    layui.config({
        base: '/static/sku-table/lay-module/', // 设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
    }).use(['form', 'skuTable'], function () {
        var form = layui.form, skuTable = layui.skuTable;

        //注意！！！ 注意！！！ 注意！！！
        //如果配置了相关接口请求的参数，请置本示例于服务器中预览，不然会有浏览器跨域问题
        //示例中的json文件仅做格式返回参考，若多次执行添加规格后再为新增后的规格添加规格值，会发现所有新增的规格都增加了该规格值。注意！此处并非是bug，原因是因为示例中返回的新增规格值id是重复的，而在正常接口请求每次返回的新增规则id是不一样的
        var obj = skuTable.render({
            //规格表容器id
            specTableElemId: 'fairy-spec-table',
            //sku表容器id
            skuTableElemId: 'fairy-sku-table',
            //sku表相同属性值是否合并行
            rowspan: true,
            //上传接口地址
            uploadUrl: "{:url('Upload/UploadFile/uploadSkuPicture')}",
            //添加规格接口地址，如果为空则表示不允许增加规格
            specCreateUrl: "{:url('sku/Api/specCreate')}",
            //删除规格接口地址
            specDeleteUrl: "{:url('sku/Api/specDelete')}",
            //添加规格值接口地址，如果为空则表示不允许增加规格值
            specValueCreateUrl: "{:url('sku/Api/specValueCreate')}",
            //删除规格值接口
            specValueDeleteUrl: "{:url('sku/Api/specValueDelete')}",
            //sku表格配置参数
            skuTableConfig: {
                thead: [
                    {title: '图片', icon: ''},
                    {title: '销售价(元)', icon: 'layui-icon-cols'},
                    {title: '券抵扣价（元）', icon: 'layui-icon-cols'},
                    {title: '状态', icon: ''},
                ],
                tbody: [
                    {type: 'image', field: 'picture', value: '', verify: '', reqtext: ''},
                    {type: 'input', field: 'price', value: '0', verify: 'required|number', reqtext: '销售价不能为空'},
                    {
                        type: 'input', field: 'use_coupon_price', value: '0', verify: 'number',
                        reqtext: '券抵扣价不能为空'
                    },
                    {
                        type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}],
                        verify: 'required', reqtext: '状态不能为空'
                    },
                ]
            },
            //规格数据, 一般从后台获取
            specData: `{$sku_list}` ? {$sku_list} : [],
            skuData: `{$info.skus}` ? JSON.parse(`{$info.skus}`) : ''
        });

        // 监听 select 选择
        form.on('select(one_type)', function (data) {
            var type = data.value;

            initBox(type);
        });

        form.on('submit(submit)', function (data) {
            var form_field = data.field;

            var state = Object.keys(data.field).some(function (item, index, array) {
                return item.startsWith('skus');
            });
            if (!state) {
                layer.msg('属性数据不能为空', {
                    icon: 5, anim: 6
                });
                return;
            }

            //删除表单中除了【属性表】之外的name元素
            for (var key in form_field) {
                if (form_field.hasOwnProperty(key)) {
                    if (key.indexOf("skus") == -1) {
                        delete form_field[key];
                    }
                }
            }

            //将富文本中的内容赋值到textarea隐藏域中以供表单提交
            window.editor.sync();
            $('textarea[name="content"]').val($('#editor_id').val());

            var sort_ids = obj.getSpecData().map(value => {
                return value.id
            });

            var formData = $('form').serialize();
            var skus = JSON.stringify(form_field);
            console.log(skus)

            $.post("{:url('doGoods')}", {
                form: formData,
                skus: skus,
                sort_ids: sort_ids.toString(),
                sku_key: sku_key
            }, function (res) {
                layer.msg(res.msg)
                if (res.result == 1) {
                    setTimeout(function () {
                        window.location.href = res.url;
                    }, res.timer)
                }
            }, 'json');

            return false;
        })
    });
</script>

<script>
    // 实例化编辑器
    initKindEditor('editor_id');
</script>{/block}
